<template>
  <div class="change-schoole">
    <ul>
      <li
        v-for="v in options"
        :key="v.id"
        :class="active == v.id ? 'active' : ''"
        @click="handleClick(v.id)"
      >
        {{ v.name }}
      </li>
    </ul>
  </div>
</template>
<script>
import { openApiSysDeptQuery } from "@/api/openApi";
import Bus from "@/utils/bus.js";
export default {
  data() {
    return {
      active: "",
      options: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      openApiSysDeptQuery({ pId: "0" }).then((res) => {
        this.options = res.data.data[0].childList.filter((v) => v.type == 1);
        this.options.unshift({
          id: "",
          name: "全部",
        });
      });
    },
    handleClick(id) {
      this.active = id;
      let data = {
        deptType: id ? 3 : 1,
        sourceUnit: this.active,
      };
      Bus.$emit("sendSchoolId", data);
    },
  },
};
</script>
<style scoped lang="scss">
.change-schoole {
  margin: 20px 0;
  height: 48px;
  line-height: 48px;
  width: 100%;
  border: 1px solid #fff;
  ul {
    li {
      font-size: 16px;
      float: left;
      padding: 0 30px;
      border-right: 1px solid #fff;
      cursor: pointer;
      &:hover,
      &.active {
        background: #2699f4;
      }
    }
  }
}
</style>